<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import api from '@/api/index.js';
import { useRoute } from 'vue-router';

const show = ref(false);
const reason = ref('');
const actions = ref([]);
const emit = defineEmits(['onSelect']);

const props = defineProps({
  detail: Object,
});
const route = useRoute();
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  reason.value = item.id;
  emit('onSelect', item);
};

const getReasonText = () => {
  if (!reason.value) {
    return false;
  }
  return actions.value.find((item) => {
    return item.id === reason.value;
  }).name;
};

const getRefundReasonList = () => {
  let apiGetOrderRefundReason, type;
  if (route.query.type === 'hotel') {
    type = 2;
    apiGetOrderRefundReason = api.getHotelRefund;
  } else {
    apiGetOrderRefundReason = api.getScenicRefund;
    type = 0;
  }
  apiGetOrderRefundReason({ type }).then((res) => {
    actions.value = res.data ?? [];
    actions.value.forEach((item) => {
      item.name = item.reason;
    });
  });
};

getRefundReasonList();
</script>

<template>
  <div class="header">退款信息</div>
  <div class="card">
    <div class="list list_bottom">
      <div class="key">退款原因</div>
      <div class="value" @click="show = true">
        <span class="change" v-if="getReasonText()">{{ getReasonText() }}</span>
        <span v-else>请选择</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="list">
      <div class="key">退款金额</div>
      <div class="value">¥{{ props.detail?.actualPrice }}</div>
    </div>
  </div>
  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
</template>

<style scoped lang="scss">
.header {
  font-size: 1.4rem;
  color: #333333;
  font-weight: bold;
  margin-bottom: 1rem;
}
.card {
  background: #fffffc;
  box-shadow: 0 1.2rem 2rem 0 rgba(2, 95, 38, 0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  .list {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    .key {
      color: #666666;
    }
    .value {
      color: #999999;
      .change {
        color: #000;
      }
    }
  }
  .list_bottom {
    margin-bottom: 2rem;
  }
}
</style>
